<template>
  <div>
    <el-form :model="DatabaseInfo" size="mini" label-position="left" label-width="90">
      <el-form-item label="名称" style="width: 60%">
        <el-input
            v-model="DatabaseInfo.DeviceName"
            style="width: 400px;"
            maxlength="35"
            placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据库">
        <el-select v-model="DatabaseInfo.DeviceType" placeholder="请选择" style="width: 200px">
          <el-option
              v-for="item in DatabaseTypes"
              :key="item"
              :label="item"
              :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="连接字符串" style="width: 60%">
        <el-input
            v-model="DatabaseInfo.ConnectionString"
            type="textarea"
            rows="6"
            style="width: 400px;"
            maxlength="335"
            placeholder="请输入连接字符串"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
            type="danger"
            @click="DeleteDatabaseBtn"
            style="color: #ffffff;margin-bottom: 30px;"
            round
            size="small"
        >
          删除
          <el-icon style="margin: 0 10px">
            <Delete/>
          </el-icon>
        </el-button>
        <el-button
            @click="SaveDatabaseBtn"
            style="color: #545c64;margin-bottom: 30px;"
            round
            size="small"
        >
          保存
          <el-icon style="margin: 0 10px">
            <Edit/>
          </el-icon>
        </el-button>
        <el-button
            type="warning" @click="CancelDatabaseBtn"
            style="color: #ffffff;margin-bottom: 30px;" round size="small">
          取消
        </el-button>
      </el-form-item>
    </el-form>
    <p>
      <el-tag type="primary">
        MYSQL连接字符串：server=localhost;port=3306;user=root;password=your_password;database=your_database;
      </el-tag>
    </p>
    <!--    <p class="m-bottom-10">数据库表</p>-->
    <!--    <el-table-->
    <!--        :height="400"-->
    <!--        style="width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"-->
    <!--    ></el-table>-->
  </div>
</template>
<script>
import { AppParams } from '@/utils/appParams'
import SysDriveApi from "@/api/flow/SysDriveApi";
import { MessageSuccess } from "@/utils";

export default {
  name: 'Database',
  data () {
    return {
      DatabaseInfo: {
        DeviceType: null,
        ConnectionString: null
      },
      DatabaseTypes: AppParams.DATABASE_TYPE
    }
  },
  methods: {
    _Show (item) {
      this.DatabaseInfo = Object.assign({}, item)
    },
    SaveDatabaseBtn () {
      new SysDriveApi().AddDrive(this.DatabaseInfo, (data) => {
        if (data && data.Id) {
          MessageSuccess('保存成功');
        }
        this.DatabaseInfo = data
        this.$emit('close')
      })
    },
    DeleteDatabaseBtn () {
      this.$confirm(`是否删除数据库${this.DatabaseInfo.DeviceName}？`, `确认删除`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'delete-plc-address-btn',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        new SysDriveApi().DeleteDevice(this.DatabaseInfo.Id, (res) => {
          this.$emit('close')
        })
      })
    },
    CancelDatabaseBtn () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">

</style>
